<template>
	<view>
		<view class='flex flex-row flex-center mb-2-4'>
			<view v-for="(el,i) in data" :key="el.title" class='flex-1 text-center' 
				:style="{width: (1 / data.length * 100 ) + '%'}"
				@click="selectTab(i)">
				<view class='inline-flex flex-column items-center'>
					<text :class="{'color-active': i === activeIndex}">{{el.title}}</text>
					<view class="rounded-ss h-0-2 bg-active w-p-80 mt-0-3" :class="{hidden: i !== activeIndex}"></view>
				</view>
			</view>
		</view>
		<view v-show="activeIndex === 0">
			<slot name="tab0"></slot>
		</view>
		<view v-show="activeIndex === 1">
			<slot name="tab1"></slot>
		</view>
		<view v-show="activeIndex === 2">
			<slot name="tab2"></slot>
		</view>
		<view v-show="activeIndex === 3">
			<slot name="tab3"></slot>
		</view>
		<view v-show="activeIndex === 4">
			<slot name="tab4"></slot>
		</view>
	</view>
</template>

<script>
	import { ref } from "vue";
	export default {
		props: {
			data: {
				required: true,
				type: Array
			}
		},
		name:"Tab",
		setup(){
			const activeIndex = ref(0);
			function selectTab(index){
				activeIndex.value = index;
			}
			return {
				activeIndex,
				selectTab
			};
		}
	}
</script>

<style>

</style>
